<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="app">
    <el-button @click="cc();">按钮</el-button>
    <el-dialog :visible.sync="visible" title="Hello world">
        <table class="table">
            <th scope="col">外观</th><th scope="col">名称</th><th scope="col">描述</th><th scope="col">价格</th><th scope="col">操作</th>
            <tr v-for="item in info">
                <td><img :src="item.img"/></td>
                <td>{{item.itemname}}</td>
                <td>{{item.description}}</td>
                <td>{{item.price}}</td>
            </tr>
        </table>
    </el-dialog>
</div>

<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '#app',
        data: function() {
            return {
                visible: false,
                info:null
            }
        },
        methods:{
            cc(){
                this.visible = true;
            }
        }
        ,
        mounted () {
            axios
                .post('/item/list')
                .then(response => (this.info = response.data))
        }
    })
</script>
</body>

</html>
